<template>
  <div>
    <!-- 顶部图 -->
    <div class="Top">
      <div class="triangle"></div>
      <div class="tu-1">
        <img src="../../assets/img/zt/home-1.jpg" alt="" />
      </div>
    </div>
    <!-- 分类 -->
    <div class="Dessert">
      <div class="center">
        <!-- 版心 -->
        <!-- 分类顶部条 -->
        <div class="text">
          <ul>
            <li>
              <a href="#">全部</a>
            </li>
            <li>
              <a href="#">冷热炖品</a>
            </li>
            <li>
              <a href="#">果汁系列</a>
            </li>
            <li>
              <a href="#">汤圆系列</a>
            </li>
            <li>
              <a href="#">精致糕点</a>
            </li>
            <li>
              <a href="#">西米露系列</a>
            </li>
            <li>
              <a href="#">豆腐花系列</a>
            </li>
            <li>
              <a href="#">雪山系列</a>
            </li>
          </ul>
        </div>
        <div class="main-content">
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-4.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">芒果班戟</a>
              <p style="margin-top: 20px">精致糕点</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-2.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">杨枝甘露</a>
              <p style="margin-top: 20px">西米露系列</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-3.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">白雪黑珍珠</a>
              <p style="margin-top: 20px">西米露系列</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-1.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <div class="box-txt">
                <a href="#">西瓜西米露</a>
                <p style="margin-top: 20px">西米露系列</p>
              </div>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-6.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">糖不甩</a>
              <p style="margin-top: 20px">汤圆系列</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-7.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">芒果豆花</a>
              <p style="margin-top: 20px">豆腐花系列</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-8.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">果汁</a>
              <p style="margin-top: 20px">果汁系列</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-5.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">焗荔茸西米布甸</a>
              <p style="margin-top: 20px">精致糕点</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-11-768x1024.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">杏汁莲子炖雪蛤</a>
              <p style="margin-top: 20px">冷热炖品</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-9-768x448.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">抹茶彩虹</a>
              <p style="margin-top: 20px">雪山系列</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-10-768x448.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">白雪黑糯米</a>
              <p style="margin-top: 20px">豆腐花系列</p>
            </div>
          </div>
          <div class="content-pic">
            <!-- 甜品图片 -->
            <div class="box">
              <img src="../../assets/img/zt/CP-12-768x448.jpg" />
              <!-- 遮罩层 -->
              <div class="box-zhezhao">
                <!-- 空心圆 -->
                <div class="box-yuan">
                  <div></div>
                </div>
              </div>
            </div>
            <div class="box-txt">
              <a href="#">杨枝甘露加绿茶雪糕</a>
              <p style="margin-top: 20px">西米露系列/雪山系列</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import url(../../assets/css/zzt_01.css);
</style>
